<template>
  <div class="tab-wrapper">
    <router-link tag="div" to="/recommend">
      <div class="tab-item">推荐</div>
    </router-link>
    <router-link tag="div" to="/singer">
      <div class="tab-item">歌手</div>
    </router-link>
    <router-link tag="div" to="/rank">
      <div class="tab-item">排行</div>
    </router-link>
    <router-link tag="div" to="/search">
      <div class="tab-item">搜索</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'tab'
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  @import '~common/stylus/mixin.styl'
  .tab-wrapper
    height: 36px
    display: flex
    margin-bottom: 4px
    div {
      flex: 1
      text-align: center
      line-height: 36px
      font-size: $font-size-medium
      .tab-item {
        color: $color-text-l
      }
      &.router-link-active {
        .tab-item {
          color: $color-theme
          border-bottom: 1px solid $color-theme
        }
      }
    }
</style>
